iT邦幫忙

2023 iThome 鐵人賽

DAY 4
0
Modern Web

購物網站 開始即放棄系列 第 4

Day 4 HTML 表單收集

  • 分享至 

  • xImage
  •  

在製作文章的時候難免需要使用者輸入一些資訊如註冊、登入、或聯絡我們等等...
所以在表單製作在HTML上是非常的重要的環節
表單的語法主要的結構如下:

<form action="檔案要傳的位置" method="傳送方式">
  <!-- ....表單的內文 .... -->
</form>
  • action 他的參數是一個連結,告訴表單要把資料傳的什麼檔案處理。
  • method 是檔案的傳送方式,通常使用 POST 或 GET 這兩種方式。

接著來介紹幾個常見的表單輸入的元素,大部分的結構都差不多,通常輸入框內都會搭配type、name、value、required、Placeholder等等的設定,語法如下:

<input type="輸入資料型態" name="輸入欄位的名字" value=是否有輸入的預設值" placeholder="提示字" required(是否必填) > 

type種類

  • 文字輸入框: <input type="text">
  • 數字輸入框: <input type="number">
  • Email輸入框: <input type="email">
  • 日期輸入框: <input type="date">
  • 密碼輸入: <input type="password"> ,輸入資料時會字動隱藏輸入內容
  • 核取方塊: <input type="checkbox">
  • 選項按鈕: <input type="radio">
  • 送出按鈕: <input type="submit">

多行文字輸入

<textarea name="輸入欄位的名字">
  我是預設文字內容
</textarea>

下拉式選單

<select name="輸入欄位的名字" >
    <option value="1">選項 1</option>
    <option value="2">選項 2</option>
    <option value="3">選項 3</option>
</select>

今天Day 4 就先到這裡囉~ 明天開始進入到PHP教學


上一篇
DAY 3 HTML 常用標籤介紹
下一篇
DAY 5 PHP 介紹
系列文
購物網站 開始即放棄13
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言